<page-bar [title]="'设置密保手机'" [subTitle]="subTitleTpl">
  <ng-template #subTitleTpl>
    <button routerLink="/user/security" nz-button nzSize="small"><i nz-icon nzType="rollback"></i> 返回安全设置</button>
  </ng-template>
</page-bar>
<nz-spin [nzSpinning]="userLoading">
  <nz-alert nzType="warning" [nzMessage]="warningTpl">
    <ng-template #warningTpl>
      提示：绑定手机号码可以使用手机号码登录，通过手机号码找回密码。请您放心，系统不会主动泄露您的手机号码
    </ng-template>
  </nz-alert>
  <form *ngIf="user" se-container="1" nzLayout="vertical" size="compact" nz-form (ngSubmit)="save()" #f="ngForm"
    class="max-width-xxl mt-lg mb-md">
    <se *ngIf="user.phone" label="当前已绑定号码">
      <nz-row [nzGutter]="8">
        <nz-col [nzSpan]="16">
          <input nz-input type="text" name="phoneold" [value]="user.phone" readonly>
        </nz-col>
        <nz-col [nzSpan]="8">
          <div class="pt-xs">
            <a class="brand-color" (click)="showEdit = false; inithide = false">解绑</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a class="brand-color" (click)="showEdit = true; inithide = false">修改</a>
          </div>
        </nz-col>
      </nz-row>
    </se>
    <se *ngIf="showEdit && !inithide" label="新手机号码" required>
      <input nz-input autocomplete="off" [(ngModel)]="phone" type="text" name="phone" maxlength="20">
    </se>
    <se *ngIf="!inithide" label="登录密码" required>
      <input nz-input [(ngModel)]="password" type="password" name="password">
    </se>
    <se *ngIf="showEdit && !inithide" label="短信验证码" required>
      <nz-row [nzGutter]="8">
        <nz-col [nzSpan]="16">
          <input nz-input autocomplete="off" [(ngModel)]="code" name="code" />
        </nz-col>
        <nz-col [nzSpan]="8">
          <captcha-btn [disabled]="!phone" (send)="sendCaptcha()">
          </captcha-btn>
        </nz-col>
      </nz-row>
    </se>
    <se *ngIf="!inithide">
      <button nz-button nzType="primary">确定</button>
    </se>
  </form>
</nz-spin>
